<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-logo {
        width: 150px;
        height: 50px;
        background: url(http://111.230.56.24/static/img/logo.png);
        background-size: 100%;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 5px;
        left: 20px;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout-footer-center {
        text-align: center;
    }

    .demo-split {
        height: 550px;
        border: 1px solid #dcdee2;
        border-top: none;
    }

    .demo-split-pane {
        padding: 10px;
    }
</style>
<template>
    <div class="layout">
        <router-view v-if="isRouterAlive"/>
        <Layout>
            <Header :style="{width: '100%'}">
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            首页
                        </MenuItem>
                        <MenuItem name="2">
                            <p v-on:click="add_cate_show = true">
                                <Icon type="md-add-circle"/>
                                添加分类
                            </p>
                        </MenuItem>
                        <MenuItem name="3">
                            <p v-on:click="isrouter('user')">
                                <Icon type="md-person"/>
                                {{ user_name }}
                            </p>
                        </MenuItem>
                        <MenuItem name="4">
                            <p v-on:click="clearAllCookie">
                                <Icon type="md-remove-circle"/>
                                注销
                            </p>
                        </MenuItem>

                    </div>
                </Menu>
            </Header>
            <Content :style="{margin: '20px 20px 0', background: '#fff', minHeight: '500px'}">
                <Row>
                    <Col span="20" push="4">
                    <div class="demo-split">
                        <Split v-model="split1">
                            <div slot="left" class="demo-split-pane">
                                <Card dis-hover style="width:200px;border: none">
                                    <p slot="title">{{ cate_name }}</p>
                                    <p slot="extra">
                                        <Icon v-if="cate_id"
                                              v-on:click="add_article_show = true,isadd = true,isupdate=false"
                                              type="md-add" :size="25"/>
                                    </p>
                                    <div>
                                        <p v-if="add_article_show">
                                            <input type="text" v-model="title">
                                            <button v-if="isadd" v-on:click="article_add">发布</button>
                                            <button v-if="isupdate" v-on:click="article_update">修改</button>
                                        </p>
                                        <p v-for="a in article" style="margin-top:20px;">
                                            <Dropdown>
                                                <Icon type="md-bookmark"/>
                                                <DropdownMenu slot="list">
                                                    <DropdownItem>
                                                        <b v-on:click="add_article_show = true,isupdate = true,isadd = false,id = a.article_id, title =a.article_title,content = a.article_content">修改</b>
                                                    </DropdownItem>
                                                    <DropdownItem>
                                                        <b v-on:click="article_delete(a.article_id)">删除</b>
                                                    </DropdownItem>
                                                </DropdownMenu>
                                            </Dropdown>

                                            <b v-on:click="getcontent(a.article_id)">{{ a.article_title }}</b>
                                        </p>

                                    </div>

                                </Card>
                                <Page v-show="show_page" :current=current :total=sum @on-change="onChange" simple/>
                            </div>
                            <div slot="right" class="demo-split-pane">
                                <mavon-editor :boxShadow="false" v-model="content" style="height: 540px"/>
                            </div>
                        </Split>
                    </div>
                    </Col>
                    <Col span="4" pull="20" style="border: none">
                    <Card dis-hover style="width:180px;border: none;">
                        <p slot="title">笔记分类</p>
                        <p slot="extra" v-on:click="add_cate_show = true">
                            <Icon type="md-add-circle" :size="25"/>
                        </p>
                        <div>
                            <p v-if="up_cate_name">
                                <input type="text" v-model="up_cate_name">
                                <button v-on:click="cate_update">修改</button>
                            </p>
                            <p v-if="add_cate_show">
                                <input type="text" v-model="add_cate_name">
                                <button v-on:click="cate_add">新增</button>
                            </p>
                            <p v-for="c in cate" :name="c.cate_id" style="margin-top:25px;">
                                <Dropdown>
                                    <Icon type="ios-arrow-dropdown-circle"/>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>
                                            <b v-on:click="cate_input(c.cate_id,c.cate_name)">修改</b>
                                        </DropdownItem>
                                        <DropdownItem>
                                            <b v-on:click="cate_delete(c.cate_id)">删除</b>
                                        </DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                                <b style="margin-left:10px;"
                                   v-on:click="getAeticle(c.cate_id,current);upcate(c.cate_id,c.cate_name)">{{ c.cate_name
                                    }}</b>

                            </p>

                        </div>
                    </Card>
                    </Col>
                </Row>
            </Content>
            <Footer class="layout-footer-center">Powered by Souyuan V1.1&nbsp;&nbsp;&nbsp;&nbsp;桂ICP备15008121号-4
            </Footer>
        </Layout>
    </div>

</template>


<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                user_name: '',
                cate: [],
                cate_id: '', // 栏目ID
                cate_name: '笔记列表', // 栏目名称
                article: [], // 文章列表
                loading: false,
                id: '',
                title: '', // 标题
                content: '', // 内容
                split1: 0.2,
                current: 1, //当前页码
                sum: 1, //数据总条数
                show_page: false,  // 显示分页
                up_cate_id: '', // 修改分类ID
                up_cate_name: '', // 修改分类名城
                add_cate_show: false, //显示输入框
                add_cate_name: '', // 新增分类名称
                add_article_show: false,
                isadd: false, // 新建
                isupdate: false, // 修改
                isRouterAlive: true
            }
        },
        computed: {
            rotateIcon() {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            reload() {
                this.isRouterAlive = false
                this.$nextTick(() => (this.isRouterAlive = true))
            },
            isrouter(path) {
                console.log(path);
                this.$router.push({path:path});
            },
            collapsedSider() {
                this.$refs.side1.toggleCollapse();
            },
            // 成功提示
            success(msg) {
                this.$Message.success({
                    content: msg,
                    duration: 2
                });
            },
            // 错误提示
            error(msg) {
                this.$Message.error({
                    content: msg,
                    duration: 2
                });
            },
            // 清除Cookies
            clearAllCookie() {
                var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (var i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                location.reload();
            },
            // 获取Cookies
            getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    return (arr[2]);
                }
                else {
                    return null;
                }
            },
            // 更新栏目名称
            upcate(cate_id, cate_name) {
                this.cate_id = cate_id;
                this.cate_name = cate_name;
            },
            // 栏目文章列表
            getAeticle(id, current_page = 1) {
                var self = this;
                self.add_article_show = false;
                return axios.get("http://111.230.56.24/api/articles", {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },
                    params: {
                        id: id,
                        page: current_page,
                        listrows: 10,
                        order: 'desc'
                    },
                })
                    .then(function (response) {
                        self.current = response.data.data.current_page; //当前页数
                        self.sum = response.data.data.total; //总页数
                        self.article = response.data.data.data; // 文章列表
                        if (self.sum > 10) {
                            self.show_page = true;
                        }
                    }).catch(function (error) {
                        alert(error);
                    });
            },
            // 获取文章内容
            getcontent(id) {
                var self = this;
                self.loading = true;
                axios.get("http://111.230.56.24/api/articles/" + id, {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },
//                    params: {
//                        id: id, // 文章ID
//                    },
                })
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.content = response.data.data['article_content'];
                        } else {
                            self.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        self.$Message.error(error);
                    });
            },
            // 分类列表
            getCate() {
                return axios.get("http://111.230.56.24/api/cates", {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },

                })
            },
            // 笔记列表
            getlist(page = 1) {
                var self = this;
                self.loading = true;
                return axios.get("http://111.230.56.24/api/articles", {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },
                    params: {
                        page: page,
                        listrows: 10,
                        order: 'desc'
                    },
                })
            },
            // 分页跳转
            onChange: function (curpage) {
                console.log('分页');
                console.log(curpage);
                console.log(this.cate_id);
                this.getAeticle(this.cate_id, curpage);
            },

            cate_input(id, name) {
                this.up_cate_id = id;
                this.up_cate_name = name;
            },
            // 添加分类
            cate_add() {
                var self = this;
                if (self.add_cate_name == '') {
                    self.error("栏目名称不能为空");
                    return;
                }
                axios.post('http://111.230.56.24/api/cates',
                    {
                        name: self.add_cate_name
                    },
                    {
                        headers: {
                            'time': (new Date()).valueOf(),
                            'Authorization': this.getCookie('token'),
                        }
                    }
                )
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success("新建成功");
                            location.reload();
                        } else {
                            self.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        self.$Message.error(error);
                    });
            },
            // 修改分类名称
            cate_update() {
                var self = this;
                if (self.up_cate_name == '') {
                    self.error("栏目名称不能为空");
                    return;
                }
                axios.put('http://111.230.56.24/api/cates',
                    {
                        id: self.up_cate_id,
                        name: self.up_cate_name
                    },
                    {
                        headers: {
                            'time': (new Date()).valueOf(),
                            'Authorization': this.getCookie('token'),
                        }
                    }
                )
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success("修改成功");
                            location.reload();
                        } else {
                            self.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        self.$Message.error(error);
                    });
            },
            // 删除分类
            cate_delete(id) {
                var self = this;
                self.loading = true;
                var url = "http://111.230.56.24/api/cates/" + id;
                axios.delete(url, {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },
                })
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success(response.data.msg);
                            location.reload();
                        } else {
                            self.error(response.data.msg);
                        }
                    })
            },
            // 发布笔记
            article_add() {
                var self = this;
                if (self.title == '') {
                    self.error("标题不能为空");
                    return;
                }
                axios.post('http://111.230.56.24/api/articles',
                    {
                        title: self.title,
                        content: self.content,
                        cid: self.cate_id,
                    },
                    {
                        headers: {
                            'time': (new Date()).valueOf(),
                            'Authorization': this.getCookie('token'),
                        }
                    }
                )
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success("发布成功");
                            self.reload();
                        } else {
                            self.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        self.$Message.error(error);
                    });
            },
            // 修改笔记
            article_update() {
                var self = this;
                if (self.title == '') {
                    self.error("标题不能为空");
                    return;
                }
                axios.put('http://111.230.56.24/api/articles',
                    {
                        id: self.id,
                        cid: self.cate_id,
                        title: self.title,
                        content: self.content,
                    },
                    {
                        headers: {
                            'time': (new Date()).valueOf(),
                            'Authorization': this.getCookie('token'),
                        }
                    }
                )
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success("修改成功");
                            self.reload;
                        } else {
                            self.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        self.$Message.error(error);
                    });
            },
            // 删除笔记
            article_delete(id) {
                var self = this;
                self.loading = true;
                var url = "http://111.230.56.24/api/articles/" + id;
                axios.delete(url, {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },
                })
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success(response.data.msg);
                            self.reload;
                        } else {
                            self.error(response.data.msg);
                        }
                    })
            },
        },
        created: function () {
            var self = this;
            self.user_name = self.getCookie('user_name');
            if (self.getCookie('token') == null) {
                self.$router.push("login");
                return;
            }
            axios.all([self.getCate(), self.getlist()])
                .then(axios.spread(function (cate, article) {
                    // 两个请求现在都执行完成
                    if (cate.data.code == 200) {
                        self.cate = cate.data.data;
                    } else {
                        self.error(cate.data.msg);
                    }
                    if (article.data.code == 200) {
                        self.current = article.data.data.current_page; //当前页数
                        self.sum = article.data.data.total; //总页数
                        self.article = article.data.data.data; // 文章表
                    } else {
                        self.error(article.data.msg);
                    }
                }));
        }
    }
</script>
